<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont2.css"/>
    <style>
    	#myTop{
    		background: #444444;
    		margin: 0;
    		border: none;
    	}
    	#myTop li{
    		border: none;
    	}
    	#myTop a div,#myTop a span{
    		color: white;
    	}
    	.title{
    		height: 10px;
    		line-height: 10px;
    		text-indent: 10px;
    	}
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav myHeader" style="box-shadow: none;background: #444444;">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><span style="font-size: 16px;">我的钱包</span></a>
        <!--<h1 class="mui-title myTitle">钱包</h1>-->
    </header>
    <div class="mui-content">
    	<ul class="mui-table-view mui-grid-view mui-grid-9" id="myTop">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <span class="mui-icon iconfont icon-shoufukuan"></span>
		            <div class="mui-media-body">收付款</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <span class="mui-icon iconfont icon-lingqian"></span>
		            <div class="mui-media-body">零钱</div>
		            <label for="" style="padding-top: 6px;display: inline-block;">48.57</label>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <span class="mui-icon iconfont icon-zhuanyinxingqia"></span>
		            <div class="mui-media-body">银行卡</div>
		        </a>
		    </li>
        </ul>
        <!--<h5 class="title">腾讯服务</h5>-->
        <ul class="mui-table-view myList" style="margin-top: 10px;">
        	<li class="mui-table-view-cell mui-col-xs-12 mui-col-sm-12">
        		<h5 class="title">腾讯服务</h5>
        	</li>	
        </ul>
    	<ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-hongbao" style="color: red;"></span>
	    	        <div class="mui-media-body">面对面红包</div>
	    	    </a>
	    	</li>
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-chongzhi" style="color: cornflowerblue;"></span>
	    	        <div class="mui-media-body">手机充值</div>
	    	    </a>
	    	</li>
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-licai" style="color: cornflowerblue;"></span>
	    	        <div class="mui-media-body">理财通</div>
	    	    </a>
	    	</li>
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-3" style="color: cornflowerblue;"></span>
	    	        <div class="mui-media-body">Q币充值</div>
	    	    </a>
	    	</li>
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-jff" style="color: green;"></span>
	    	        <div class="mui-media-body">生活缴费</div>
	    	    </a>
	    	</li>
	    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    	    <a href="#">
	    	        <span class="mui-icon iconfont icon-chengshi" style="color: green;"></span>
	    	        <div class="mui-media-body">城市服务</div>
	    	    </a>
	    	</li>
    	</ul>
    	<ul class="mui-table-view myList" style="margin-top: 10px;">
        	<li class="mui-table-view-cell mui-col-xs-12 mui-col-sm-12">
        		<h5 class="title">第三方服务</h5>
        	</li>	
       </ul>
    	<ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-danche" style="color: red;"></span>
    	        <div class="mui-media-body">摩拜单车</div>
    	    </a>
    	</li>
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-didi" style="color: darkgoldenrod;"></span>
    	        <div class="mui-media-body">滴滴出行</div>
    	    </a>
    	</li>
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-jiudian" style="color: red;"></span>
    	        <div class="mui-media-body">酒店</div>
    	    </a>
    	</li>
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-waimai" style="color: cornflowerblue;"></span>
    	        <div class="mui-media-body">外卖</div>
    	    </a>
    	</li>
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-chihewanle" style="color: green;"></span>
    	        <div class="mui-media-body">吃喝玩乐</div>
    	    </a>
    	</li>
    	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    	    <a href="#">
    	        <span class="mui-icon iconfont icon-dianying" style="color: darkgoldenrod;"></span>
    	        <div class="mui-media-body">电影</div>
    	    </a>
    	</li>
    	    </ul>
    </div>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    </script>
</body>
</html>

